<#-- 导入模版定义文件-->
<#include "../template/template_editPage.ftl">
<@edit title="相册管理">
<body class="input">
<script type="text/javascript" charset="utf-8" src="${web_static}/kindeditor/kindeditor.js"></script>
<script type="text/javascript" charset="utf-8" src="${web_static}/kindeditor/lang/zh_CN.js"></script>
<script>
	$().ready( function() {
	
		var $validateErrorContainer = $("#validateErrorContainer");
		var $validateErrorLabelContainer = $("#validateErrorContainer ul");
		var $validateForm = $("#inputForm");
		var $tab = $("#tab");
	
		// Tab效果
		$tab.tabs(".tabContent", {
			tabs: "input"
		});
		
		// 表单验证
		$validateForm.validate({
			errorContainer: $validateErrorContainer,
			errorLabelContainer: $validateErrorLabelContainer,
			wrapper: "li",
			errorClass: "validateError",
			ignoreTitle: true,
			rules: {
				"albumInfo.name": {
						required: true,
						maxlength:20
				},
				"albumInfo.month": {
						required: true
				},
				"albumInfo.introduction"{
						maxlength:200
				}
			},
			messages: {
				"albumInfo.name": {
						required: "请输入相册名称",
						maxlength: "相册名称必须在20个字符以内"
				},
				"albumInfo.month": {
						required: "请选择相册归属月份"
				} ,
				"albumInfo.introduction"{
						maxlength:"相册简介必须在200个字符以内"
				}
			},
			submitHandler: function(form) {
				$(form).find(":submit").attr("disabled", true);
				form.submit();
			}
		});
		<#if actionErrors??&&(actionErrors?size > 0)>
			$.dialog({type: "warn", content: "<#list actionErrors as list>${list}<br></#list>",
			 modal: true, autoCloseTime: 3000});
		</#if>
	});
	
	function showDiv(picId,imgdiv,imgShow){
   		new uploadPreview({ UpBtn: picId, DivShow: imgdiv, ImgShow: imgShow });
	}
	
	function clearImg(imgId,imgShow){
		var obj = document.getElementById(imgId) ;   
		obj.outerHTML=obj.outerHTML;  
		
		$('#'+imgShow).attr("src", "");
	}


		
</script>

<div class="body">
		<div class="inputBar">
			<h1><span class="icon">&nbsp;</span>相册管理</h1>
		</div>
		<div style="display: none;" id="validateErrorContainer" class="validateErrorContainer">
			<div class="validateErrorTitle">以下信息填写有误,请重新填写</div>
				<ul></ul>
			</div>
		</div>	
		
		<form id="inputForm" name="inputForm" class="validate" action="<#if id??>${web_base}/go/album!edit.htm<#else>${web_base}/go/album!save.htm</#if>" method="post" enctype="multipart/form-data">
		<input type="hidden" name="albumInfo.id" class="formText" value="${(albumInfo.id)!}" />
			<table class="inputTable tabContent">
				<tr>
					<th>
						相册名称：
					</th>
					<td>
						<input type="text"  name="albumInfo.name" class="formText {required: true}" value="${(albumInfo.name)!}" />
						<label id="labelUrl" class="requireField">*</label>
					</td>
				</tr>
				<tr>
					<th>
						归属月份：
					</th>
					<td>
						 <input type="text" id="startTime1" name="albumInfo.monthStr"
                           onclick="WdatePicker({skin:'whyGreen',startDate:'%y',dateFmt:'yyyy-MM',maxDate:'\'%y-%M-%d\'}'})"
                           value="${(albumInfo.month?string("yyyy-MM"))!}" class="Wdate fixWidth" >
					</td>
				</tr>
				<tr>
					<th>
						相册归属人：
					</th>
					<td>
						<input type="text"  name="albumInfo.belongTo" class="formText {required: true}" value="${(albumInfo.belongTo)!}" />
						<label id="labelUrl" class="requireField">*</label>
					</td>
				</tr>
				<tr>
					<th>
						相册封面：
					</th>
					<td>
					<div style="float:left">
    				<input type="file" id="albumCover" name="albumCover" value="添加图片" onclick="showDiv('albumCover','imgdiv1','imgShow1')"/>
						<div id="imgdiv1">
							<img id="imgShow1" width="160" height="100"  src="${(web_base + (albumInfo.albumPath))!}"/>
							<span class="spanLink" onclick="clearImg('imgdiv1','imgShow1')" title="删除">[删除]</span>
						</div>
					</div>
					</td>
				</tr>
				<tr>
					<th>相册简介：</th>
					<td>
						<textarea rows="8" cols="60" name="albumInfo.introduction" class="formText {}" >${(albumInfo.introduction)!}</textarea>
					</td>
				</tr>
			</table>
			<div class="buttonArea">
				<input type="submit" class="formButton" value="提  交" hidefocus="true" />&nbsp;&nbsp;&nbsp;&nbsp;
				<input type="button" class="formButton" onclick="window.history.back(); return false;" value="取  消" hidefocus="true" />
			</div>
		</form>
	</div>
</body>
</@edit>